<template>
	<div style="display: flex;flex-direction: column;align-items: center;height: 50vh;">
		<h3>密码修改-教师学生同页面组件</h3>
		<hr style="width: 100%;">
		<div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
			<table border="1" cellspacing="0" style="line-height: 25px">
				<tbody>
					<tr>
						<td>旧密码：</td>
						<td><input type="text" v-model="data.obj.oldPwd" /></td>
					</tr>
					<tr>
						<td>新密码：</td>
						<td><input type="password" v-model="data.obj.newPwd" /></td>
					</tr>
					<tr>
						<td>确认密码：</td>
						<td><input type="password" v-model="data.newPwd2" /></td>
					</tr>
				</tbody>
			</table>
		</div>
		<hr style="width: 100%;">
		<button style="width: 20%;" @click="save()">确认修改密码</button>
	</div>

</template>

<script setup>
	import { reactive,ref } from 'vue';
	import { $postx } from '@/ajax';
	import store from '@/store';
	import router from '@/router';
	
	const data = reactive({
		obj: {
			oldPwd: '',
			newPwd: '',
		},
		newPwd2: ''
	})
	
	const save = () => {
		
		if(data.obj.oldPwd == '' || data.obj.oldPwd == undefined){
			store.state.msg = "请输入旧密码"
			return;
		}
		if(data.obj.newPwd == '' || data.obj.newPwd == undefined){
			store.state.msg = "请输入新密码"
			return;
		}
		if (data.obj.newPwd != data.newPwd2) {
			store.state.msg = "确认密码错误，请重新输入新密码"
			data.obj.newPwd = '';
			data.newPwd2 = '';
			return;
		}
		if (data.obj.newPwd == data.obj.oldPwd) {
			store.state.msg = "修改后密码与修改前密码重复"
			return;
		}
		
		$postx("/api/user/updatePwd",data.obj)
		.then( (resp) => {
			store.state.msg = resp.data.msg;
			console.dir(resp.data)
			if(resp.data.code == 200){
				window.localStorage.setItem("token", "");
				router.push("/login");
			}
		})
	}
</script>

<style>
</style>